<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色权限编辑器-运营后台</title>
<%--公共jsp,包含通用css样式和js引用 --%>
<%@ include file="/WEB-INF/pages/common/common.jsp"%>
<style type="text/css">
.editorWindow table {
	margin-bottom: 5px;
}

.editorWindow table td {
	border: 1px #DDDDDD solid; padding: 8px 12px;
}

.editorWindow #mainPicImg, .editorWindow #viewPicImg {
	width: 200px; min-height: 80px;
}

.permission-list {
	padding: 12px;
}

.permission-list ul {
	overflow: hidden; padding: 10px; border: 1px dashed #CCC; margin-bottom: 10px;
}

.permission-list ul li {
	float: left; display: block; margin: 4px 6px; width: 220px;
}

.permission-list ul li span {
	color: #999;
}

input[type="checkbox"] {
	vertical-align: middle; margin-right: 0;
}

.permission-list ul li.action {
	color: #dd514c;
}
</style>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$('#btnSave').click(function() {
							var form = $("form");
							ajaxToSave(form);
						});

						$('#p1 input[type="checkbox"][checked="checked"]')
								.each(
										function() {
											$(
													'#p2 input[type="checkbox"][value="'
															+ $(this).val()
															+ '"]').prop(
													'checked', true).parents(
													'li').addClass('action');

										})
<%--$('#p1 input[type="checkbox"]').click(function() {
					if ($(this).prop('checked')) {
						$(this).parents('li').addClass('action');
					} else {
						$(this).parents('li').removeClass('action');
					}
				});--%>
				$('#p2 input[type="checkbox"]').click(function() {
							if ($(this).prop('checked')) {
								$(this).parents('li').addClass('action');
							} else {
								$(this).parents('li').removeClass('action');
							}
						});
					});
	/**
	 * ajax储存
	 */
	function ajaxToSave(form) {
		var options = {
			url : _webApp + '/system/role/save',
			success : function(data) {
				console.log(window.parent.location.reload());
				if (typeof data == 'object') {
					if (data.result == "success") {
						messagerShow("保存成功");
						window.location.href = window.location.href;
					} else {
						$.messager.alert("结果", "保存错误");
					}
				} else if (typeof data == 'string') {
					if (data.indexOf("用户权限不足") >= 0) {
						$.messager.alert("警告", "用户权限不足");
					}
				}
			}
		};
		
		$('form', this.editPanle).ajaxSubmit(options);
	}

</script>
</head>
<body>
	<form>
		<div class="editorWindow">
			<input type="hidden" name="id" value="${role.id}"></input>
			<input type="hidden" name="version" value="${role.version}"></input>
			<table class="edit_table">
				<tr>
					<td class="field" width=70>名称<span class="cRed">*</span>:
					</td>
					<td><input type="text" name="name" value="${role.name}" class=""></input></td>
				</tr>
				<tr>
					<td class="field">标识<span class="cRed">*</span>:
					</td>
					<td><input type="text" name="role" value="${role.role}" class=""></input></td>
				</tr>
				<tr>
					<td class="field">描述:</td>
					<td><textarea name="description" class="w200">${role.description}</textarea></td>
				</tr>
				<tr>
					<td class="field"></td>
					<td colspan="3"><input class="btn btn-blue" type="button" id="btnSave" value="保存" /> <input class="btn" type="button" id="btnCancel" value="取消" /></td>
				</tr>
			</table>
			<div id="extra_permission_gird"></div>
		</div>
		<div class="permission-list" id="p1" style="display: none;">
			<ul>
				<c:forEach var="permission" items="${role.permissionList}">
					<li class="action"><label><input type="checkbox" value="${permission.id}" checked="checked" /> ${permission.name}<br> <span>${permission.permission}</span></span></label></li>
				</c:forEach>
			</ul>
		</div>
		<div class="permission-list" id="p2">
			<c:forEach var="list" items="${lists}">
				<ul>
					<c:forEach var="permission" items="${list}">
						<li><label><input type="checkbox" value="${permission.id}" name="permissionIds" /> ${permission.name}<br> <span>${permission.permission}</span></span></label></li>
					</c:forEach>
				</ul>
			</c:forEach>
		</div>
	</form>
</body>
</html>